<!-- 故障报修 -->
<template>
	<view class="no-warpper">
		<view v-if='!notNetwork' class="nl-shadow-box overflow-visible">
			<scroll-view scroll-y="true" class="scroll-box">
				<view class="nl-flex-title">房屋信息</view>
				<view class="nl-flex-list" @click="showProperty.locationShow = true">
					<text>位置</text>
					<view :class="malfunctionRepairInfo.locationInfo  ? 'right':'right-grey'">
						{{malfunctionRepairInfo.locationInfo ? malfunctionRepairInfo.locationInfo :'请选择'}}
					</view>
					<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
				</view>
				<view v-show="CU_show == '002' || CU_show == '003' || CU_show == '004'" class="nl-flex-list"
					@click="_go_location('2')">
					<text>楼栋</text>
					<view :class="malfunctionRepairInfo.floorName != '请选择' ? 'right':'right-grey'">
						{{malfunctionRepairInfo.floorName}}
					</view>
					<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
				</view>
				<view v-show="CU_show == '003' || CU_show == '004'" class="nl-flex-list" @click="_go_location('3')">
					<text>单元</text>
					<view :class="malfunctionRepairInfo.unitName ? 'right':'right-grey'">
						{{malfunctionRepairInfo.unitName ? malfunctionRepairInfo.unitName : '请选择'}}
					</view>
					<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
				</view>
				<view v-show="CU_show == '004'" class="nl-flex-list" @click="_go_location('4')">
					<text>房屋</text>
					<view :class="malfunctionRepairInfo.roomName ? 'right':'right-grey'">
						{{malfunctionRepairInfo.roomName ? malfunctionRepairInfo.roomName : '请选择'}}
					</view>
					<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
				</view>
				<view class="nl-flex-title">报修信息</view>
				<view class="nl-flex-list" @click="genreShow()">
					<text>报修类型</text>
					<view :class="malfunctionRepairInfo.repairsGenre != '请选择' ? 'right':'right-grey'">
						{{malfunctionRepairInfo.repairsGenre}}
					</view>
					<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
				</view>
				<view class="nl-flex-list">
					<text class="input-margin">报修人</text>
					<u-input style="flex: 1;" v-model="malfunctionRepairInfo.conditions.repairName" :clearable="false" :type="type"
						placeholder="请输入报修人" :border="border" />
				</view>
				<view class="nl-flex-list">
					<text class="input-margin">手机号码</text>
					<u-input style="flex: 1;" v-model="malfunctionRepairInfo.conditions.tel" :clearable="false" type="Number"
						placeholder="请输入手机号码" :border="border" />
				</view>
				<view class="nl-flex-list" @click="showProperty.dateShow = true">
					<text>预约日期</text>
					<view :class="malfunctionRepairInfo.conditions.bindDate ? 'right':'right-grey'">
						{{malfunctionRepairInfo.conditions.bindDate ? malfunctionRepairInfo.conditions.bindDate : "请选择"}}
					</view>
					<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
				</view>
				<view class="nl-flex-list" @click="showProperty.timeShow = true">
					<text>预约时间</text>
					<view :class="malfunctionRepairInfo.conditions.bindTime ? 'right':'right-grey'">
						{{malfunctionRepairInfo.conditions.bindTime ? malfunctionRepairInfo.conditions.bindTime : "请选择" }}
					</view>
					<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
				</view>
				<view class="nl-flex-title">报修内容</view>
				<view class="textarea-padding">
					<u-input placeholder-style="color: #AFAFAF;font-size: 26rpx;" type="textarea"
						v-model="malfunctionRepairInfo.conditions.context" />
				</view>
				<view class="nl-flex-title">
					<text>图片上传</text>
				</view>
				<uploadImg @photos="photosList()" :prompt="false" :maxCount="4" :width="145" :height="145"></uploadImg>
				<view class="button-lg sticky-position">
					<button @click="saveOwnerRepair()">提交</button>
				</view>
			</scroll-view>
		</view>
		<!-- 网络异常 -->
		<defaultPage v-else text="网络异常，请重新尝试" src="../../static/noData/zwwl.png" @refresh="refresh()" bottonType="1">
		</defaultPage>

		<u-toast ref="uToast" />
		<!-- 位置 -->
		<view>
			<u-select confirm-color="#1585FC" v-model="showProperty.locationShow" mode="single-column"
				:list="locationList" @confirm="_locationConfirm()"></u-select>

		</view>
		<!-- 报修类型 -->
		<view>
			<u-select confirm-color="#1585FC" v-model="showProperty.genreShow" mode="single-column"
				:list="malfunctionRepairInfo.genreList" @confirm="_genreConfirm()">
			</u-select>
		</view>
		<!-- 预约日期 -->
		<view>
			<u-picker confirm-color="#1585FC" v-model="showProperty.dateShow" :params="dateInfo" mode="time"
				start-year="2021" @confirm="dateConfirm()">
			</u-picker>
		</view>
		<!-- 预约时间 -->
		<view>
			<u-picker confirm-color="#1585FC" v-model="showProperty.timeShow" :params="tiemInfo" mode="time"
				@confirm="timeConfirm()">
			</u-picker>
		</view>

	</view>
</template>

<script>
	const PLEASE_CHOOSE = '请选择'
	import {
		getRepairSettings,
		saveOwnerRepair
	} from "@/api/repair.js"
	// import {
	// 	getOwnerRoom
	// } from "@/api/owner.js"
	import {
		mapState,
	} from 'vuex';
	export default {
		data() {
			return {
				dateInfo: {
					year: true,
					month: true,
					day: true,
				},
				tiemInfo: {
					hour: true,
					minute: true,
					second: true
				},
				showProperty: {
					genreShow: false,
					dateShow: false,
					timeShow: false,
					locationShow: false
				},
				notNetwork: false, // 处理暂无数据或网络错误
				CU_show: "", //控制显示楼栋、单元、房屋
				malfunctionRepairInfo: {
					repairsGenre: PLEASE_CHOOSE,
					locationInfo: '',
					floorName: PLEASE_CHOOSE,
					floorId: '',
					unitId: '',
					roomId: '',
					unitName: '',
					roomNum: '',
					genreList: [],
					roomName: '',
					publicArea: "T",
					conditions: {
						userId: '', // 用户id
						userName: '', // 用户名
						roomId: '', // 房间id
						repairObjName: '', // 位置名称
						repairObjId: '', // 位置id
						repairObjType: '', // 位置类型
						tel: '', // 联系方式
						repairName: '', // 报修人
						context: '', // 报修内容
						photos: [], // 照片
						communityId: '', // 小区id
						repairType: '', // 报修类型id
						appointmentTime: '', // 预约时间
						bindDate: '', // 预约日期
						bindTime: '', // 预约时间时分秒
					}
				},
				locationList: [{
						value: '001',
						label: '小区'
					},
					{
						value: '002',
						label: '楼栋'
					},
					{
						value: '003',
						label: '单元'
					},
					{
						value: '004',
						label: '房屋'
					}
				],

			}
		},
		watch: {
			// showProperty: {
			// 	handler: function(val) {
			// 		return this.textareaShow = !this.textareaShow
			// 	},
			// 	deep: true
			// }
		},
		created() {
			// this.getOwnerRoom()
		},
		computed: {
			...mapState('user', ['userInfo', 'userCommunity', 'userId'])
			// ...mapState('user', ['userId', 'userInfo']),
			// ...mapState('owner', ['ownerInfo'])
		},
		/**
		 * option为object类型，会序列化上个页面传递的参数
		 */
		onLoad(option) {

		},
		methods: {
			genreShow() {
				if (!this.malfunctionRepairInfo.locationInfo) {
					this.$refs.uToast.show({
						title: '请先选择报修位置',
						type: "warning "
					})
					
					return false
				}
				
				if(this.malfunctionRepairInfo.genreList.length === 0){
					this.$refs.uToast.show({
						title: '暂无报修类型',
						type: "warning "
					})
				}else{
					this.showProperty.genreShow = true
				}
			},
			// 刷新页面
			refresh(e) {
				if (e) {
					// this.getOwnerRoom()
				}
			},
			/**
			 * 接收楼栋页面参数方法
			 */
			floorFun(floor) {
				if (!!floor) {
					this.malfunctionRepairInfo.floorName = floor.floorName
					this.malfunctionRepairInfo.floorId = floor.floorId
					this.malfunctionRepairInfo.conditions.repairObjId = floor.floorId
					this.malfunctionRepairInfo.conditions.repairObjName = floor.floorName
					// 去除单元
					this.malfunctionRepairInfo.unitName = ""
					this.malfunctionRepairInfo.unitId = ""
				}
			},
			/**
			 * 接收单元页面参数方法
			 */
			unitFun(unit) {
				if (!!unit) {
					this.malfunctionRepairInfo.unitName = unit.unitName
					this.malfunctionRepairInfo.unitId = unit.unitId
					this.malfunctionRepairInfo.conditions.repairObjId = unit.unitId
					this.malfunctionRepairInfo.conditions.repairObjName = unit.unitName
					// 去除房屋
					this.malfunctionRepairInfo.roomName = ""
					this.malfunctionRepairInfo.roomId = ""
				}
			},
			/**
			 * 接收房屋页面参数方法
			 */
			roomFun(room) {
				if (!!room) {
					this.malfunctionRepairInfo.roomName = room.roomName
					this.malfunctionRepairInfo.roomId = room.roomId
					this.malfunctionRepairInfo.conditions.repairObjId = room.roomId
					this.malfunctionRepairInfo.conditions.repairObjName = room.roomName
					this.malfunctionRepairInfo.conditions.roomId = room.roomId
				}
			},
			/**
			 * 选择位置
			 */
			_locationConfirm(e) {
				this.malfunctionRepairInfo.locationInfo = e[0].label
				this.CU_show = e[0].value
				switch (this.CU_show) {
					case '001':
						this.malfunctionRepairInfo.publicArea = "T"
						this.malfunctionRepairInfo.conditions.repairObjId = this.userCommunity.communityId;
						this.malfunctionRepairInfo.conditions.repairObjName = this.userCommunity.name;
						this.malfunctionRepairInfo.conditions.roomId = ''
						this.malfunctionRepairInfo.floorName = PLEASE_CHOOSE;
						this.malfunctionRepairInfo.unitName = ''
						this.malfunctionRepairInfo.roomName = ""
						break;
					case '002':
						this.malfunctionRepairInfo.publicArea = "T"
						this.malfunctionRepairInfo.conditions.repairObjId = ''
						this.malfunctionRepairInfo.conditions.repairObjName = ''
						this.malfunctionRepairInfo.conditions.roomId = ''
						this.malfunctionRepairInfo.floorName = PLEASE_CHOOSE
						this.malfunctionRepairInfo.unitName = ''
						this.malfunctionRepairInfo.roomName = ""
						break;
					case '003':
						this.malfunctionRepairInfo.publicArea = "T"
						this.malfunctionRepairInfo.conditions.repairObjId = ''
						this.malfunctionRepairInfo.conditions.repairObjName = ''
						this.malfunctionRepairInfo.conditions.roomId = ''
						this.malfunctionRepairInfo.unitName = ''
						this.malfunctionRepairInfo.roomName = ""
						break;
					case '004':
						this.malfunctionRepairInfo.publicArea = "F"
						this.malfunctionRepairInfo.conditions.repairObjId = ''
						this.malfunctionRepairInfo.conditions.repairObjName = ''
						this.malfunctionRepairInfo.conditions.roomId = ''
						this.malfunctionRepairInfo.floorName = PLEASE_CHOOSE
						this.malfunctionRepairInfo.unitName = ''
						this.malfunctionRepairInfo.roomName = ""
						break;
				}
				this.malfunctionRepairInfo.conditions.repairObjType = e[0].value
				this.getRepairSettings()
			},
			/**
			 * 选择楼、单元
			 */
			_go_location(param) {
				// 楼栋故障报修
				if (param == 2) {
					uni.navigateTo({
						url: "/pages/my/roomLocationInfo/floor?communityId=" + this.userCommunity.communityId,
					})
					// 单元故障报修
				} else if (param == 3 && this.malfunctionRepairInfo.floorName != '请选择') {
					uni.navigateTo({
						url: "/pages/my/roomLocationInfo/unit?floorId=" +
							this.malfunctionRepairInfo.floorId + '&communityId=' + this.userCommunity.communityId,
					})
				} else if (param == 3 && this.malfunctionRepairInfo.floorName == '请选择') {
					this.$refs.uToast.show({
						title: '请先选择楼栋',
						type: "warning "
					})
					// 房屋故障报修
				} else if (param == 4 && this.malfunctionRepairInfo.floorName != '请选择' && this.malfunctionRepairInfo
					.unitName != '请选择') {
					console.log('==', this.malfunctionRepairInfo.unitId)
					uni.navigateTo({
						url: "/pages/my/roomLocationInfo/room?floorId=" +
							this.malfunctionRepairInfo.floorId + "&unitId=" +
							this.malfunctionRepairInfo.unitId + '&communityId=' +
							this.userCommunity.communityId,
					})
				} else if (param == 4 && this.malfunctionRepairInfo.floorName == '请选择') {
					this.$refs.uToast.show({
						title: '请先选择楼栋',
						type: "warning "
					})
				} else if (param == 4 && this.malfunctionRepairInfo.unitName == '请选择') {
					this.$refs.uToast.show({
						title: '请先选择单元',
						type: "warning "
					})
				}
			},
			/*
			 * 获取报修类型请求
			 */
			getRepairSettings() {
				this.malfunctionRepairInfo.genreList = []
				const data = {
					page: '1',
					row: '50',
					communityId: this.userCommunity.communityId,
					publicArea: this.malfunctionRepairInfo.publicArea,
				}
				getRepairSettings(data).then(res => {
					for (let i = 0; i < res.data.length; i++) {
						let list = {
							value: res.data[i].repairType,
							label: res.data[i].repairTypeName
						}
						this.malfunctionRepairInfo.genreList.push(list)
					}
				}).catch(err => {
					console.log('请求失败')
				})
			},
			/**
			 * 选择报修类型
			 */
			_genreConfirm(e) {
				this.malfunctionRepairInfo.repairsGenre = e[0].label
				this.malfunctionRepairInfo.conditions.repairType = e[0].value
			},
			/**
			 * 选择预约日期
			 */
			dateConfirm(e) {
				this.malfunctionRepairInfo.conditions.bindDate = e.year + '-' + e.month + '-' + e.day
			},
			/**
			 * 选择预约时间
			 */
			timeConfirm(e) {
				this.malfunctionRepairInfo.conditions.bindTime = e.hour + ':' + e.minute + ':' + e.second
			},
			/**
			 *  提交报修单
			 */
			saveOwnerRepair() {
				let text = '';
				let state = '0';
				if (this.CU_show == '002' && !this.malfunctionRepairInfo.floorId) {
					text = '请选择楼栋';
					state = '1'
				}
				if (this.CU_show == '003' && !this.malfunctionRepairInfo.unitName) {
					text = '请选择单元';
					state = '1'
				}
				if (this.CU_show == '004' && !this.malfunctionRepairInfo.conditions.roomId) {
					text = '请选择房屋';
					state = '1'
				}
				if (state == '1') {
					uni.showToast({
						title: text,
						icon: 'none',
						duration: 1500
					})
					return
				}
				this.malfunctionRepairInfo.conditions.appointmentTime =
					this.malfunctionRepairInfo.conditions.bindDate + ' ' + this.malfunctionRepairInfo.conditions
					.bindTime;
				if (!this.checkData()) { //校验
					return;
				}
				const data = this.malfunctionRepairInfo.conditions
				this.malfunctionRepairInfo.conditions.communityId = this.userCommunity.communityId
				this.malfunctionRepairInfo.conditions.userId = this.userId
				this.malfunctionRepairInfo.conditions.userName = this.userInfo.userName

				saveOwnerRepair(data).then(res => {
						uni.showToast({
							title: '提交成功',
							duration: 1000,
							// mask: true,
							success() {
								setTimeout(() => {
									uni.navigateBack();
								}, 1000)

							}
						})
					})
					.catch(err => {
						this.notNetwork = true
						uni.showToast({
							title: '提交失败',
							icon: 'error',
							mask: true
						})
					})
			},
			/**
			 * 图片列表
			 */
			photosList(data) {
				this.malfunctionRepairInfo.conditions.photos = data
			},
			// 校验
			checkData() {
				return this.$checkFrom({
					conditions: this.malfunctionRepairInfo.conditions
				}, {
					'conditions.repairObjId': [{
						limit: "required",
						param: "",
						errInfo: "请选择报修位置",

					}],
					'conditions.repairType': [{
						limit: "required",
						param: "",
						errInfo: "请选择报修类型"
					}],
					'conditions.repairName': [{
						limit: "required",
						param: "",
						errInfo: "请填写报修人"
					}],
					'conditions.tel': [{
							limit: "required",
							param: "",
							errInfo: "请填写手机号"
						},
						{
							limit: "phone",
							param: "",
							errInfo: "手机号格式错误",
						}
					],
					'conditions.bindDate': [{
						limit: "required",
						param: "",
						errInfo: "请选择预约日期",
					}],
					'conditions.bindTime': [{
						limit: "required",
						param: "",
						errInfo: "请选择预约时间",
					}],
					'conditions.context': [{
						limit: "required",
						param: "",
						errInfo: "请填写报修内容"
					}],
				});
			},
		}
	}
</script>

<style lang="scss">
	.scroll-box {
		width: 100%;
		max-height: 95vh;
	}

	.input-margin {
		width: 120rpx;
		margin-right: 45rpx;
		text-align-last: justify;
	}

	.textarea-padding {
		min-height: 124rpx;
		padding: 0 24rpx
	}

	.overflow-visible {
		overflow: visible;

		.sticky-position {
			background-color: #fff;
			position: -webkit-sticky;
			position: sticky;
			bottom: 0;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
		}
	}
</style>
